<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<input class="form-control" id="type" th:value="${type}" type="hidden"/>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-zhibiao">
        <input id="tableId" name="tableId" th:value="${id}" type="hidden">

        <h4 class="form-header h4">基本信息</h4>

        <!-- <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">部门名称：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text = "${table.deptName}"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">负责人：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text = "${table.leader}"></div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">绩效方案名称：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text="${table.projectName}"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tableArea hidden" id="tableDiv">
            <h4 class="form-header h4">表格信息</h4>
            <div class="col-sm-12 search-collapse" id="search">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                方案名称：<input id="treeName" name="deptName" onclick="selectDeptTree()" type="text">
                            </li>
                            <li>
                                <input id="treeId" name="deptId" type="hidden"/>
                            </li>

                            <li>
                                <a class="btn btn-success btn-rounded btn-sm" onclick="selectByDept()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-success btn-rounded btn-sm" onclick="reset()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>


            </div>
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$('#table').tableExport({ type: 'excel', escape: 'false'})"
                   shiro:hasPermission="zzjx:pefctasstable:add">
                    <i class="fa fa"></i> 导出
                </a>
            </div>
            <table class="table table-striped" id="table">
                <!--在此处填充表格数据-->
            </table>
        </div>
    </form>
    <div class="row">
        <div class="tableArea hidden col-sm-12 m" id="tableDiv2">
            <h4 class="form-header h4">评分信息</h4>
            <h3 id="indName" style="color: red;"></h3>
            <table class="table table-striped" id="bootstrap-table">
                <!--在此处填充表格数据-->
            </table>
        </div>
    </div>

    <div th:include="include::footer"></div>
    <script th:src="@{/ajax/libs//datapicker/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/ajax/libs/select/select2.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        var prefix = ctx + "zzjx/pefassproject";
        $(function () {
            doChange(null); //初始化表格信息
            $("#search").hide();
        })

        /**
         * 更改模板，重新加载预览信息
         * @returns {boolean}
         */
        function doChange(deptId) {
            var tableId = $("#tableId").val(); //表单id
            if (tableId != "") {
                $.modal.loading("请等待加载预览信息!");
                $.ajax({
                    url: ctx + "zzjx/pefctasstable/showPreview"
                    , data: {"tableId": tableId, deptId: deptId}
                    , dataType: "JSON"
                    , type: "GET"
                    , async: false
                    , success: function (result) {
                        $("#table").html("");
                        var dictData = result.dictData;
                        var list = result.list;
                        buildTable($('#table'), dictData.length, list.length, dictData, list);
                        $.modal.closeLoading();
                    }, error: function () {
                        $.modal.closeLoading();
                        $.modal.alertError("获取预览信息失败!");
                    }
                })
                $("#tableDiv").removeClass("hidden");
                return false;
            }
            $("#tableDiv").addClass("hidden");
        }


        /**
         * 构建预览信息表格
         * @param $el
         * @param cells
         * @param rows
         * @param dictData
         * @param peftempletindicatorList
         */
        function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
            var i, j, row,
                columns = [],
                data = [];

            //拼接table,拼接表头
            for (var dd in dictData) {
                var dictLabel = dictData[dd]["dictLabel"];//显示名称
                var dictValue = dictData[dd]["dictValue"];//字段值

                var f = {
                    field: dictValue,
                    title: dictLabel
                }
                if (dictValue == "id") {
                    f = {
                        field: dictValue,
                        title: dictLabel,
                        visible: false
                    }
                }
                columns.push(f);
            }

            //拼接数据
            for (var i in peftempletindicatorList) {
                row = {};
                for (var dd in dictData) {
                    var dictValue = dictData[dd]["dictValue"];//字段值
                    for (var key in peftempletindicatorList[i]) {    //map key 
                        //console.log(key);
                        //console.log(peftempletindicatorList[i][key]);  //map value
                        if (key == dictValue) {
                            if (dictValue == "checkcyc") {
                                row[key] = $.table.selectDictLabel([[${@dict.getType('zzjx_pefindicator_checkcyc')}]], peftempletindicatorList[i][key]);
                            } else {
                                row[key] = peftempletindicatorList[i][key];
                            }
                        }
                    }
                }
                data.push(row);
            }

            $el.bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: data,
                search: false,
                showSearch: true,
                showExport: false,
                onClickRow: function (row, $element) {
                    loadKpxx(row);
                }
            });
        }

        /**
         * 点击指标加载考评详细
         */
        function loadKpxx(row) {
            var id = row.id;
            $.modal.loading("请等待加载此指标的考评信息!");
            $.ajax({
                url: ctx + "zzjx/assessor/selectAssessorByIndId/" + id
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    $("#bootstrap-table").html("");
                    buildTable2(result);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取考评信息失败!");
                }
            })
            $("#tableDiv2").removeClass("hidden");
            $("#indName").html("&nbsp;&nbsp;&nbsp;&nbsp;" + row.indName);
        }

        function buildTable2(list) {
            var columns = [
                {
                    field: 'assessorCode',
                    title: '工号'
                },
                {
                    field: 'userName',
                    title: '姓名'
                },
                {
                    field: 'deptName',
                    title: '部门'
                },
                {
                    field: 'roleName',
                    title: '角色名称'
                },
                {
                    field: 'percents',
                    title: '评分人权重'
                },
                {
                    field: 'rolePercents',
                    title: '评分角色权重'
                },
                {
                    field: 'score',
                    title: '评分'
                },
                {
                    field: 'comments',
                    title: '评语'
                }];
            var row;
            var data = [];
            //拼接数据
            for (var i in list) {
                row = {};
                for (var key in list[i]) {    //map key 
                    row[key] = list[i][key];
                }
                data.push(row);
            }

            $("#bootstrap-table").bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: data,
                search: false
            });
        }

        function selectDeptTree() {
            var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
            var url = ctx + "system/dept/selectDeptTree/" + deptId;
            var options = {
                title: '选择部门',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero) {
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            if ($.tree.notAllowParents(tree)) {
                var body = layer.getChildFrame('body', index);
                $("#treeId").val(body.find('#treeId').val());
                $("#treeName").val(body.find('#treeName').val());
                layer.close(index);
            }
        }

        function reset() {
            $("#treeId").val('');
            $("#treeName").val('');
        }

        function selectByDept() {
            var deptId = $("#treeId").val();

            doChange(deptId);

        }
    </script>
</body>
</html>
